<template>
    <div class="zh-file-editor">
        <nav-header>
            <template slot="menuBefore">
				<li><router-link to="/user/studystatus/graduate-file" tag="a">毕业生档案管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
            <li>详情</li>
        </nav-header>

        <div class="file-header-btn">
            <el-button @click="exportSelect">导出</el-button>
            <el-button type="primary" plain @click="goBack">取消</el-button>
            <el-button v-if="!isDisabled" type="primary" @click="submitSave">保存</el-button>
        </div>

        <el-tabs v-model="activeName" type="card" @tab-click="changeTab">
            <el-tab-pane label="基础信息" name="first">
                <p class="tab-title">基础信息</p>
                <div class="file-base-photo" v-if="Object.keys(basicscList).length != 0">
                    <div class="presonPic">
                        <img :src="previewImgURL" class="avatar">
                        <div>
                            <template>
                                <span>
                                    <template v-for="item in basicscList.studystatus">
                                        <template v-if="item.id === 1">
                                            {{item.field_name}}：{{item.content.content ? item.content.content : basicscList.user_name}}
                                        </template>
                                    </template>
                                    <template v-for="(item, index) in basicscList.studystatus">
                                        <template v-if="item.id === 2">
                                            <span :key="index">
                                                （{{item.content.content}}）
                                            </span>
                                        </template>
                                    </template>
                                </span>
                            </template>

                            <template v-for="(item, index) in basicscList.studystatus">
                                <uploader 
                                    :ref="'uploader' + (index + 1)"
                                    class="uploader-broadcast"
                                    v-if="item.field_name === '个人照片'"
                                    :key="index"
                                    :options="uploadOptions"
                                    :autoStart="true"
                                    :file-status-text="statusText"
                                    @files-submitted="fileSubmit"
                                    @file-removed="fileRemoved"
                                    @file-success="fileSuccess"
                                    @file-error="fileFail">
                                    <uploader-unsupport></uploader-unsupport>
                                    <uploader-btn :directory="false" :attrs="attrs" :single="true"><span @click="setPhoto(item, index + 1)">更换照片</span></uploader-btn>
                                </uploader>
                            </template>
                        </div>
                    </div>
                    
                    <template v-for="(item, index) in basicscList.studystatus">
                        <div :key="index" v-if="item.id === 16">
                            <img :src="'./../../../../static/image/user/file-' + statusList[item.content.content ? (item.content.content - 1) : 0] + '.png'">
                            <span>{{item.field_name}}</span>
                        </div>
                    </template>
                </div>

                <div class="file-base-info" v-if="Object.keys(basicscList).length != 0">
                    <div>
                        <span>账号：</span>
                        <el-input v-model="basicscList.user_number" disabled></el-input>
                    </div>
                    <div>
                        <span>用户名：</span>
                        <el-input v-model="basicscList.user_name" disabled></el-input>
                    </div>
                    <div>
                        <span>学校：</span>
                        <el-input v-model="basicscList.school_name" disabled></el-input>
                    </div>
                    <div>
                        <span>班级：</span>
                        <el-input v-model="basicscList.class.rename" disabled></el-input>
                    </div>
                    <div>
                        <span>班主任：</span>
                        <el-input v-model="basicscList.class.teacher_name" disabled></el-input>
                    </div>

                    <template v-for="(item, index) in basicscList.studystatus">
                        <div :key="index" v-if="item.is_up !== 1">
                            <span>{{item.field_name}}：</span>

                            <template v-if="item.type === 3">
                                <el-radio-group v-model="item.content.content" disabled>
                                    <template v-for="(item2, index2) in item.field_option">
                                        <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </template>
                            <template v-else>
                                <template v-if="isDisabled">
                                    <el-input 
                                        :type="item.type === 6 ? 'textarea' : 'text'" 
                                        :rows="4"
                                        disabled
                                        v-model="item.content.content">
                                    </el-input>
                                </template>
                                <template v-else>
                                    <div v-if="item.id === 11">
                                        <el-input 
                                            :maxLength="11"
                                            :class="errorTitle.telTip ? 'error-tips-info' : ''"
                                            @blur="setNumber(item)"
                                            v-model="item.content.content">
                                        </el-input>
                                        <div style="color: red; font-size: 12px;">{{errorTitle.telTip}}</div>
                                    </div>

                                    <el-input 
                                        v-else
                                        :type="item.type === 6 ? 'textarea' : 'text'" 
                                        :rows="4"
                                        :disabled="item.id === 13 ? false : true"
                                        v-model="item.content.content">
                                    </el-input>
                                </template>
                            </template>
                        </div>
                    </template>
                </div>
            </el-tab-pane>

            <el-tab-pane label="家庭信息" name="second">
                <p class="tab-title">家庭信息</p>
                <div class="file-family-info" v-if="familyList.length > 0">
                    <div class="file-family-info-title">
                        <template v-for="(item, inx) in familyList.filter(item => item.user_id !== 0)">
                            <div 
                                :class="(isFamilyBounded === true) && (familyBoundedIndex === inx) ? 'family-info-active' : ''" 
                                :key="item.id" 
                                @click="setStyleActive(inx, true)">
                                <span>家长{{inx + 1}}</span>
                            </div>
                        </template>

                        <template v-for="(item2, inx2) in familyList.filter(item2 => item2.user_id === 0)">
                            <div 
                                :class="(isFamilyUnbounded === false) && (familyUnboundedIndex === inx2) ? 'family-info-active' : ''" 
                                :key="item2.id" 
                                @click="setStyleActive(inx2, false)">
                                <span>成员{{inx2 + 1}}</span>
                            </div>
                        </template>
                    </div>

                    <div class="file-family-info-box">
                        <div 
                            :class="(isFamilyBounded === true) && (familyBoundedIndex === index) ? 'family-info-active' : ''" 
                            v-for="(item, index) in familyList.filter(item => item.user_id !== 0)" 
                            @click="setStyleActive(index, true)"
                            :key="item.id">
                            <div>
                                <span>家长{{index + 1}}账号：</span>
                                <el-input v-model="item.number" disabled></el-input>
                            </div>
                            <div>
                                <span>用户名：</span>
                                <el-input v-model="item.username" disabled></el-input>
                            </div>

                            <template v-for="(item1, inx1) in item.field">
                                <div :key="inx1">
                                    <span>{{item1.field_name}}：</span>

                                    <template v-if="item1.type === 3">
                                        <el-radio-group v-model="item1.content.content" disabled>
                                            <template v-for="(item2, index2) in item1.field_option">
                                                <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                            </template>
                                        </el-radio-group>
                                    </template>
                                    <template v-else>
                                        <template v-if="isDisabled">
                                            <el-input v-model="item1.content.content" disabled></el-input>
                                        </template>
                                        <template v-else>
                                            <el-input 
                                                v-model="item1.content.content" 
                                                :disabled="[22, 23, 24].includes(item1.id) ? false : true">
                                            </el-input>
                                        </template>
                                    </template>
                                </div>
                            </template>
                        </div>
                    
                        <div 
                            :class="(isFamilyUnbounded === false) && (familyUnboundedIndex === inx2) ? 'family-info-active' : ''" 
                            v-for="(item, inx2) in familyList.filter(item2 => item2.user_id === 0)" 
                            @click="setStyleActive(inx2, false)"
                            :key="item.id">
                            <template v-for="(item1, inx1) in item.field">
                                <div :key="inx1">
                                    <span>{{item1.field_name}}：</span>

                                    <template v-if="item1.type === 3">
                                        <el-radio-group v-model="item1.content.content" disabled>
                                            <template v-for="(item2, index2) in item1.field_option">
                                                <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                            </template>
                                        </el-radio-group>
                                    </template>
                                    <template v-else>
                                        <template v-if="isDisabled">
                                            <el-input v-model="item1.content.content" disabled></el-input>
                                        </template>
                                        <template v-else>
                                            <div v-if="item1.id === 22">
                                                <el-input 
                                                    :maxLength="11"
                                                    :disabled="isDisabled"
                                                    :class="errorTitle1[inx2] ? 'error-tips-info' : ''"
                                                    @input="setNumber1(item1, inx2)"
                                                    v-model="item1.content.content">
                                                </el-input>
                                                <div style="color: red; font-size: 12px;">{{errorTitle1[inx2]}}</div>
                                            </div>

                                            <el-input 
                                                v-else
                                                v-model="item1.content.content"
                                                :disabled="item1.id === 24 ? true : false">
                                            </el-input>
                                        </template>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane label="来源信息" name="third">
                <p class="tab-title">来源信息</p>
                <div class="file-source-info">
                    <template v-for="(item, sindex) in sourceList">
                        <div :key="sindex" v-if="item.is_up !== 1">
                            <span>{{item.field_name}}：</span>

                            <template>
                                <el-input 
                                    disabled
                                    :type="item.type === 6 ? 'textarea' : 'text'" 
                                    :rows="4"
                                    v-model="item.content.content">
                                </el-input>
                            </template>
                        </div>
                    </template>
                </div>
            </el-tab-pane>

            <el-tab-pane label="其他信息" name="fourth">
                <p class="tab-title">其他信息</p>
                <div class="file-other-info">
                    <template v-for="(item, oindex) in otherList">
                        <div :key="oindex" v-if="item.is_up !== 1">
                            <span>{{item.field_name}}：</span>

                            <template v-if="item.type === 3">
                                <el-radio-group v-model="item.content.content" disabled>
                                    <template v-for="(item2, index2) in item.field_option">
                                        <el-radio :label="(index2 + 1)" :key="index2">{{item2}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </template>
                            <template v-else>
                                <el-input v-model="item.content.content" disabled></el-input>
                            </template>
                        </div>
                    </template>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {downloadBatchDemo, uploaderFileFail} from './../../../tools/tool';

// 教育局只能预览毕业生档案信息，不可操作
export default {
    data() {
        return {
            uploadOrNot: false, //是否已经上传
            selectFileOrNot: false, //是否选中文件
            selectFileShow: true, //是否显示选择文件按钮
            uploadRetryTimes: 100, //文件最大重传次数
            previewImgURL: "",
            activeName: "first",
            imageType: ['image/jpeg', 'image/bmp', 'image/png'], // 上传图片格式
            statusList: ['normal', 'warning', 'warning', 'warning', 'warning', 'graduated'], // 状态列表 0正常 || 1异动 || 5已毕业
            attrs: { accept: ["image/*"] },
            loading:{
                status: false,
                txt: '获取数据...',
            },
            uploadOptions: {
                target: this.BASE_URL + "/api/resource/res_upload",
                testChunks: false,
                headers: { Authorization: `Bearer ` + this.$g.access_token }
            },
            statusText: {
                success: "上传成功",
                error: "上传出错",
                uploading: "正在上传...",
                paused: "暂停",
                waiting: "等待上传"
            },
            uploadInfo: {
                file_name: "",
                file_path: "",
                file_size: 0
            },
            basicscList: {}, // 基础信息
            _basicscList: {}, // 基础信息默认
            familyList: {}, // 家庭信息
            _familyList: {}, // 家庭信息默认
            sourceList: {}, // 来源信息
            otherList: {}, // 其他信息
            photoItem: null, // 图片上传的对象
            photoID: '', // 图片上传组件 ref
            isDisabled: false, // 页面不可编辑
            isFamilyBounded: true, // 家庭信息 -- 绑定
            familyBoundedIndex: 0, // 家庭信息 -- 绑定下标
            isFamilyUnbounded: null, // 家庭信息 -- 未绑定
            familyUnboundedIndex: -1, // 家庭信息 -- 未绑定下标
            user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
            errorTitle: { // 基础信息--错误提示
                telTip: '',
                cardTip: '',
            },
            errorTitle1: [], // 家庭信息--错误提示
        };
    },
    created() {
        for (let i=1; i<=4; i++) {
            this.getList(i);
        }
        
        if (this.$route.query.level === 'detail' && this.user_level === 0) {
            this.isDisabled = true;
        }
    },
    methods: {
        /**
         * 输入框设置长度
         * @param {Object} obj 当前对象
         * @param {Number} inx 对象下标
         */
        setNumber1(obj, inx) {
            if (is_empty(obj.content.content)) {
                this.errorTitle1[inx] = '';
                return false;
            }

            let _temp = deep_clone(obj.content.content) + '';
            let reg1 = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;

            if (!reg1.test(_temp)) {
                this.errorTitle1[inx] = '请输入正确的联系方式';
            } else {
                this.errorTitle1[inx] = '';
            }
        },
        /**
         * 输入框设置长度
         * @param {Object} obj 当前对象
         */
        setNumber(obj) {
            if (is_empty(obj.content.content)) {
                this.errorTitle.telTip = '';
                return false;
            }

            let _temp = deep_clone(obj.content.content) + '';
            let reg1 = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;

            if (!reg1.test(_temp)) {
                this.errorTitle.telTip = '请输入正确的联系方式';
            } else {
                this.errorTitle.telTip = '';
            }
        },
        /**
         * 设置样式高亮
         * @param {Number} index 对象下标
         * @param {Number} key 是否绑定
         */
        setStyleActive(index, key) {
            if (key === true) {
                this.isFamilyBounded = key;
                this.familyBoundedIndex = index;
                this.isFamilyUnbounded = null;
                this.familyUnboundedIndex = -1;
            } else {
                this.isFamilyBounded = null;
                this.familyBoundedIndex = -1;
                this.isFamilyUnbounded = key;
                this.familyUnboundedIndex = index;
            }
        },
        /**
         * 获取信息
         * @param {Number} key 1基础信息 || 2家庭信息 || 3来源信息 || 4其他信息
         */
        getList(key) {
            this.loading.status = true;
            
            let success = (res => {
                this.loading.status =  false;
                
                switch(key) {
                    case 1:
                        this.basicscList = deep_clone(res.data);
                        this._basicscList = deep_clone(res.data);

                        if (!is_empty(res.data.studystatus)) {
                            res.data.studystatus.forEach(item => {
                                if (item.id === 18) {
                                    if (item.content.content != null) {
                                        this.previewImgURL = this.BASE_URL + deep_clone(item.content.content);
                                    }
                                }
                            })
                        }
                        break;
                    case 2:
                        this.familyList = deep_clone(res.data);
                        this._familyList = deep_clone(res.data);

                        if (is_empty(this.familyList.filter(item => item.user_id !== 0))) {
                            this.familyBoundedIndex = -1;
                            this.familyUnboundedIndex = 0;
                            this.isFamilyBounded = null;
                            this.isFamilyUnbounded = false;
                        }
                        break;
                    case 3:
                        this.sourceList = deep_clone(res.data);
                        break;
                    case 4:
                        this.otherList = deep_clone(res.data);
                        break;
                }
            });
            let params = {
                user_id: this.$route.params.id,
                from_type: key,
                get_end_class: 1
            }
            
            this.$ajax.get('api/studystatus/studystatus_info', {params, func: {success: success}})
        },
        /**
         * 设置上传插件的ref和当前对象
         * @param {Object} item 当前点击的对象
         * @param {Number} index 当前点击的index
         */
        setPhoto(item, index) {
            this.photoItem = item;
            this.photoID = 'uploader' + index;
        },
        /**
         * 切换tab标签页
         */
        changeTab(tab, event) {},
        /**
         * 保存毕业生档案详情
         */
        submitSave() {
            if (this.errorTitle.telTip) {
                this.$message.error('请输入正确的电话格式');
                return false;
            }

            if (this.errorTitle.cardTip) {
                this.$message.error('请输入正确的身份证号');
                return false;
            }

            let len = this.errorTitle1.length;
            if (len > 0) {
                for (let i=0; i<len; i++) {
                    if (this.errorTitle1[i]) {
                        this.$message.error('请输入正确的电话格式');
                        return false;
                    }
                }
            }

            let param = {arr: []};
            param.arr['user_id'] = this.$route.params.id;
            param.arr['basic'] = [];
            param.arr['family'] = [];

            this.basicscList.studystatus.forEach(item => {
                if (item.id === 11 || item.id === 13 || item.id === 18) {
                    let _arr = {
                        field_id: item.id,
                        content: item.content.content
                    }

                    param.arr['basic'].push(_arr);
                }
            })

            this.familyList.forEach((item, index) => {
                param.arr['family'][index] = [];
                param.arr['family'][index]['family_id'] = item.user_id;

                item.field.forEach(item1 => {
                    param.arr['family'][index].push({
                        field_id: item1.id,
                        content: item1.content.content
                    })
                })
            })

            const success = (res => {
                this.$message.success(res.msg);
            })

            this.$ajax.post("api/studystatus/studystatus_operation", param, {func: {success: success}});
        },
        /**
         * 导出档案信息
         */
        exportSelect() {
            this.export_excel(
                "api/studystatus/download_student_status",
                {id: this.$route.params.id},
                "毕业生档案管理详情"
            );
        },
        /**
         * 判断两个对象是否相等
         * @param {Object} a 默认对象 
         * @param {Object} b 要比较的对象
         */
        isObjectValueEqual(a, b) {
            let aProps = Object.getOwnPropertyNames(a);
            let bProps = Object.getOwnPropertyNames(b);
        
            if (aProps.length != bProps.length) {
                return false;
            }

            for (let i=0; i<aProps.length; i++) {
                let propName = aProps[i];
                let propA = a[propName];
                let propB = b[propName];

                // propA 和 propB 都为空或 null 的时候，默认相等
                if ((propA === '' || propA === null) && (propB === '' || propB === null)) {
                    continue;
                } else {
                    if (propA != propB) {
                        if (Object.prototype.toString.call(propA) == '[object Object]' || Object.prototype.toString.call(propA) == '[object Array]') {
                            if (this.isObjectValueEqual(propA, propB)) {
                                continue
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }
            }

            return true;
        },
        /**
         * 返回上一页
         */
        goBack() {
            let flag1 = false;
            let flag2 = false;

            flag1 = this.isObjectValueEqual(this._basicscList, deep_clone(this.basicscList));
            flag2 = this.isObjectValueEqual(this._familyList, deep_clone(this.familyList));

            if (!flag1 || !flag2) {
                let yes = (res => {
                    this.$router.go(-1);
                })
                let cancel = (res => {})
                    
                this.e_confirm({yes: yes, cancel: cancel, txt: '你有数据未保存，是否确定取消？'});
            } else {
                this.$router.go(-1);
            }
        },
        /**
         * 更换头像成功
         */
        fileSuccess(rootFile, file, message, chunk) {
            let mess = eval("(" + message + ")");
            mess = handleResponseData( mess );

            if (parseInt(mess.data.status) === 1) {
                this.uploadOrNot = true;
                // this.uploadInfo.file_name = mess.data.file_name;
                // this.uploadInfo.file_path = mess.data.file_path;
                // this.uploadInfo.post_fix = mess.data.post_fix;
                this.photoItem.content.content = mess.data.file_path;
            }
        },
        /**
         * 更换头像失败
         */
        fileFail(rootFile, file, message, chunk) {
            uploaderFileFail(this, this.$refs[this.photoID][0].uploader, file, message);
        },
        /**
         * 过滤文件格式
         */
        fileSubmit(files, fileList, event) {
            for (let i=0; i<fileList.length; i++) {
                let file_type = fileList[i].fileType.toLocaleLowerCase();

                if(!this.imageType.includes(file_type)){
                    this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
                    this.$refs[this.photoID][0].uploader.removeFile(fileList[i]);
                } else if (fileList[i].size > 10240000) {
                    this.$message.warning("只允许上传10M以内的文件");
                    this.$refs[this.photoID][0].uploader.removeFile(fileList[i]);
                } else {
                    if (this.$refs[this.photoID][0].uploader.fileList.length > 1) {
                        //删除第一张图片
                        this.$refs[this.photoID][0].uploader.removeFile(
                            this.$refs[this.photoID][0].uploader.fileList[0]
                        );
                    }

                    this.previewImgURL = window.URL.createObjectURL(fileList[i].file);
                    this.uploadInfo.file_size = fileList[i].size;
                    this.selectFileOrNot = true;
                    this.selectFileShow = false;
                }
            }
        },
        /**
         * 移除文件
         */
        fileRemoved(file) {
            this.selectFileOrNot = false;
            this.selectFileShow = true;
        }
    }
};
</script>
<style lang="scss">
.zh-file-editor {
    .error-tips-info >input {
        border: 1px solid red !important;
    }

    .file-header-btn {
        position: absolute;
        top: 75px;
        right: 40px;
        z-index: 999;

        button {
            padding: 8px 19px;
            font-size: 14px;
        }
    }

    .tab-title:before {
        content: "";
        display: inline-block;
        margin-right: 8px;
        margin-bottom: -3px;
        width: 5px;
        height: 16px;
        background: #33bbbb;
        border-radius: 5px;
    }

    .tab-title {
        font-weight: bold;
    }

    .tab-title:after {
        content: "";
        position: absolute;
        top: 24px;
        left: 96px;
        width: calc(100% - 96px);
        height: 1px;
        border-top: 1px dashed #ccc;
    }

    .file-base-photo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 35px 0 20px;
        margin: 30px 0 20px;
        width: 100%;
        height: 120px;
        background-image: linear-gradient(-180deg, #87d1fe 0%, #aedaff 100%);
        box-sizing: border-box;

        .presonPic {
            display: flex;
            align-items: center;

            >img {
                margin-right: 15px;
                width: 75px;
                height: 75px;
                border: 2px solid rgba(255,255,255,0.50);
                object-fit: contain;
                border-radius: 100px;
                box-sizing: border-box;
                object-fit: cover;
            }

            >div {
                >span {
                    i {
                        margin-left: 10px;
                        cursor: pointer;
                    }

                    span {
                        font-size: 12px;
                        color: #4C769C;
                    }
                }

                >div {
                    margin-top: 12px;

                    .uploader-btn {
                        padding: 7px 12px;
                        border-radius: 4px;
                        font-size: 12px;
                        color: #fff;
                        background: #348EFC;
                        border: none;
                    }
                }
            }
        }

        >div:last-child {
            display: flex;
            align-items: center;
            flex-direction: column;

            img {
                width: 58px;
                height: 68px;
                object-fit: contain;
            }

            span {
                margin-top: 5px;
                padding: 2px 11px;
                font-size: 12px;
                color: #FFFFFF;
                background: #699AE4;
                border-radius: 100px 20px 100px 20px;
            }
        }
    }

    .file-base-info {
        display: flex;
        flex-wrap: wrap;

        > div {
            display: flex;
            align-items: baseline;
            margin-bottom: 20px;
            width: 50%;

            > span {
                width: 160px;
                font-size: 14px;
                color: #333333;
            }

            > div {
                width: 320px;
            }
        }
    }

    .file-family-info {
        .family-info-active {
            margin-top: -1px;
            margin-left: -1px;
            margin-bottom: -1px;
            border: 1px solid #4B9BFC !important;
        }

        .file-family-info-title {
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            min-height: 40px;
            padding-right: 80px;
            border: 1px solid #DDDDDD;
            box-sizing: border-box;

            >div {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 120px;
                height: 40px;
                color: #6E6E6E;
                border-right: 1px solid #DDDDDD;
                border-bottom: 1px solid #DDDDDD;
                box-sizing: border-box;
            }
        }

        .file-family-info-box {
            display: flex;
            flex-wrap: wrap;

            >div {
                margin-top: 10px;
                padding: 27px 20px;
                width: calc(50% - 10px);
                max-width: 680px;
                background: #F6F8FA;
                box-sizing: border-box;

                >div {
                    display: flex;
                    align-items: baseline;
                    margin-bottom: 20px;

                    > span {
                        display: inline-block;
                        width: 120px;
                        font-size: 14px;
                        color: #333333;
                        vertical-align: top;
                    }

                    > div {
                        flex: 1;
                        max-width: 490px;
                    }
                }
            }

            >div:nth-child(2n + 1) {
                margin-right: 10px;
            }

            >div:nth-child(2n) {
                margin-left: 10px;
            }
        }
    }

    .file-source-info,
    .file-other-info {
        margin-top: 38px;

        >div {
            display: flex;
            align-items: baseline;
            margin-bottom: 20px;

            > span {
                display: inline-block;
                width: 150px;
                font-size: 14px;
                color: #333333;
                vertical-align: top;
            }

            > div {
                width: 490px;
            }
        }
    }
}
</style>